
<!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的内容</title>
<meta charset="utf-8" />
<style>
	select{width:100px;height:85px;}
	div{display:inline-block;width:50px}
</style>

</head>
<body>
	<!--假设两个select元素，分别保存备选地区列表和选中地区列表
实现两选择框之间选项的交换：
    包括：当个选中项左右移动
              多个选中项左右移动
              全左移和全右移
要求：两个select中的地区都要按照名称首字母排序
-->
	<select id="unsel" size="5" multiple>
		<option>Argentina</option>
		<option>Brazil</option>
		<option>Canada</option>
		<option>Chile</option>
		<option>China</option>
		<option>Cuba</option>
		<option>Denmark</option>
		<option>Egypt</option>
		<option>France</option>
		<option>Greece</option>
		<option>Spain</option>
	</select>
	<div>
		<button id="btn1">&gt;&gt;</button>
		<button id="btn">&gt;</button>
		<button id="btn2">&lt;</button>
		<button id="btn4">&lt;&lt;</button>
	</div>
	<select id="sel" size="5" multiple>
	</select>
	
	<script type="text/javascript">
		var leftarr=[];
		var rightarr=[];
		var buts=document.getElementsByTagName("button");
		var opts=unsel.innerHTML;
		
						//去掉开头结尾的空白符，在从8到-9截取，去掉开头和结尾的<option>,最后切割option
		leftarr=opts.trim().slice(8,-9).split(/<\/option>\s*<option>/);
		console.log(leftarr);
		console.log(rightarr);
//		console.log(buts);
		for(var i=0;i<buts.length;i++){
			buts[i].onclick=function(){
				switch(this.innerText){
					case ">>":
						rightarr=rightarr.concat(leftarr);
						leftarr=[];					
					break;
					
					case "<<":
						leftarr=leftarr.concat(rightarr);
						rightarr=[];					
					break;
					
					case ">":
						var optionss=unsel.options;
						console.log(optionss);
						for(var m=optionss.length-1;m>=0;m--){
							if(optionss[m].selected){
								//选中某个就可以获取当前元素的下标
								console.log(m);
								rightarr=rightarr.concat(leftarr.splice(m,1));
							}
						}
					break;
					
					case "<":
						var optionss=sel.options;
						console.log(optionss);
						for(var m=optionss.length-1;m>=0;m--){
							if(optionss[m].selected){
								//选中某个就可以获取当前元素的下标
								console.log(m);
								leftarr=leftarr.concat(rightarr.splice(m,1));
							}
						}		
					break;
				}
				leftarr.sort();
				rightarr.sort();
				//调用渲染函数
				render();
			}		
		}
		
		//渲染页面
		function render(){
			//右边的数组有东西，说明准备渲染右边的select了
			if(rightarr.length>0){							
				sel.innerHTML="<option>"+rightarr.join("</option><option>")+"</option>";				
			}else{
				//清空
				sel.innerHTML="";
			}
			
			//左边的数组有东西，说明准备渲染左边的select了
			if(leftarr.length>0){				
				unsel.innerHTML="<option>"+leftarr.join("</option><option>")+"</option>";
			}else{
				unsel.innerHTML="";
			}
		}
	</script>
</body>
</html>
